<template>
    <div class="main-page">
        <el-form>
            <el-row>
                <el-col :span=14>
                    <el-form-item label="">
                        <el-date-picker
                            size="mini"
                            v-model="rangetime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
                    <el-button type="warn" @click="this.warnOper" size="mini" icon="el-icon-search">打开提醒</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="备注"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="starttime"
                    label="开始时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="duriationtime"
                    label="上课时长"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="endtime"
                    label="结束时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subname"
                    label="科目"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="modifyRecord(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: "clsDetailPeriodRecord",
        data() {
            return {
                rangetime: null,
                pager: {pageNo: 1, pageSize: 5},
                rids:[],
                formData: {
                    starttime: null,
                    endtime: null,

                },
                loading: false,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['adminInfo'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),
          async   warnOper() {
                const res=await wxnotify({data:{cid:this.cid,rids:this.rids}});
                if(res.success==true){

                }else {

                }

            },
            modifyOper() {

            },
            async deleOper(index, id) {
                const res = await deleteRecordApi({data:{}});
                if (res.success == true) {

                }
                else {

                }

            },
            modifyRecordPanel(index, rid) {
                this.modifystuid = id;
                this.ModifyDialogVisible = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pager.pageNo = val;
                this.initData()
            },
          async   modifyRecord() {
                const res = await
                modifyRecordApi({data:{}});
                if (res.success == true) {
                    this.ModifyDialogVisible=true;
                    this.$refs.modifyRulePanel.childForm = res.data;


                }
                else {

                }

            },


            changetime() {
                if (this.rangetime == null) return;
                t = this.rangetime.split(",");
                t1 = t[0];
                t2 = t[1];
                formData.starttime = moment(t1).strptime("%Y-%m-%dT%H:%M:%S.%fZ");
                formData.endtime = moment(t2).strptime("%Y-%m-%dT%H:%M:%S.%fZ");
            },

            initData() {
                changetime();
                alert(JSON.stringify(this.formData));
                return;
                this.loading = true;
                this.tableData = [];
                var list = v.data.values;
                this.count = v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.comments = item.comments;
                    tableData.createtime = item.createtime;
                    tableData.subject = item.subject;
                    tableData.stats = item.status;
                    this.tableData.push(tableData);

                });
                this.loading = false;
            }

        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }
</style>
